<template>
    <div class="HomeBox">
        <div class="topBox">
            <div class="headlines">
                <div class="fl head-title">
                    矿山数量：<span class="head-count">{{ kuangshan_cnt }}</span
                    >个
                </div>
                <div class="fl head-title">
                    钢丝绳数量：<span class="head-count">{{ sheng_cnt }}</span
                    >套
                </div>
                <!-- <el-button type="primary" class="fr marl-10">
                    <router-link to="/dashboard" target="_blank" style="color: white">大屏展示</router-link>
                </el-button> -->
                <el-button type="primary" class="fr marl-10" @click="onOpenDataV">大屏展示</el-button>
                <DataSelect ref="kuangshan_select" table="Department" class="fr" placeholder="请选择矿山" :filter="{ _Type: Enums.Department_Type.矿山 }" v-model:id="filterModel._DepartmentID" @change="departmentChange"></DataSelect>
            </div>
        </div>
        <div class="chart-content">
            <div class="fl chart-left">
                <div class="chart-pie">
                    <div class="headlines">
                        在用绳综合状态情况
                        <el-tooltip v-if="remarkObj.zhongHe" :content="remarkObj.zhongHe" placement="top">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </div>
                    <div class="chart-pie-content" id="chart1"></div>
                </div>
                <!-- <div class="chart-desc">
                    <p><span style="font-size: 16px">说明：</span>此环图展示所有钢丝绳的状态数据占比情况； <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;轻度、中度、重度、严重、报废表示钢丝绳的各种状态； <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;如报废标准为1；严重为0.75-1.0；重度为0.5-0.75；中度为0.25-0.5；轻度为0-0.25。</p>
                </div> -->
            </div>
            <div class="fl chart-right">
                <div class="chart_line">
                    <div class="headlines">
                        在用绳LA情况
                        <el-tooltip v-if="remarkObj.la" :content="remarkObj.la" placement="top">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </div>
                    <div class="chartBox" id="chart_la"></div>
                </div>
                <div class="chart_line">
                    <div class="headlines">
                        在用绳DIA情况
                        <el-tooltip v-if="remarkObj.dia" :content="remarkObj.dia" placement="top">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </div>
                    <div class="chartBox" id="chart_dia"></div>
                </div>
                <div class="chart_line">
                    <div class="headlines">
                        在用绳LMA情况
                        <el-tooltip v-if="remarkObj.lma" :content="remarkObj.lma" placement="top">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </div>
                    <div class="chartBox" id="chart_lma"></div>
                </div>
                <div class="chart_line">
                    <div class="headlines">
                        在用绳LL情况
                        <el-tooltip v-if="remarkObj.ll" :content="remarkObj.ll" placement="top">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </div>
                    <div class="chartBox" id="chart_nianju"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";

import * as echarts from "echarts";
import Enums from "@/gx/Enums";
import _ from "lodash";
import ConfigBase from "@/_gx/_Base/ConfigBase";

let numObj = ref<any>({});
const HomeData = ref<any>({});
const remarkObj = reactive({
    la: null,
    dia: null,
    lma: null,
    ll: null,
    zhongHe: null,
});

const kuangshan_all_cnt = ref(0);
const kuangshan_cnt = ref(0);
const sheng_cnt = ref(0);

const chart_arr = ref<any>([]);

const router = useRouter();

//页面加载
onMounted(() => {
    clearCharts();
    Init();
});

const onOpenDataV = () => {
    window.open(Config._DATAV_URL);
};

//初始化
const Init = () => {
    GetHomeData();
    App.CallApi(Api.Department.GetCount, {
        data: {
            _Type: Enums.Department_Type.矿山,
        },
        success: (res) => {
            kuangshan_all_cnt.value = res;
            kuangshan_cnt.value = res;
        },
    });

    GetWireropeCount();

    App.CallApi(Api.StandStatus.GetAll(), {
        success: (res) => {
            remarkObj.la = res.find((x) => x.type == Enums.StandStatus_Type.LA).remark;
            remarkObj.dia = res.find((x) => x.type == Enums.StandStatus_Type.DIA).remark;
            remarkObj.lma = res.find((x) => x.type == Enums.StandStatus_Type.LMA).remark;
            remarkObj.ll = res.find((x) => x.type == Enums.StandStatus_Type.捻距变化).remark;
            remarkObj.zhongHe = res.find((x) => x.type == Enums.StandStatus_Type.综合).remark;
        },
    });
};

//搜索条件
const filterModel = ref<any>({
    _DepartmentID: null,
});

//改变矿山
const departmentChange = () => {
    if (filterModel.value._DepartmentID != null && filterModel.value._DepartmentID != undefined) {
        kuangshan_cnt.value = 1;
    } else {
        kuangshan_cnt.value = kuangshan_all_cnt.value;
    }
    GetHomeData();
    GetWireropeCount();
};

//获取钢丝绳数量
const GetWireropeCount = () => {
    App.CallApi(Api.UsingWirerope.GetCount, {
        data: {
            _DepartmentID: filterModel.value._DepartmentID,
            _Status: Enums.UsingWirerope_Status.在用,
        },
        success: (res) => {
            sheng_cnt.value = res;
        },
    });
};

const GetHomeData = () => {
    App.CallApi(Api.UsingWirerope.GetHomeData(), {
        data: filterModel.value,
        success: (res: any) => {
            HomeData.value = res;
            numObj.value = res.zhongHe;
            initPieChart(res.zhongHe);
            initChart();

            window.addEventListener("resize", () => {
                for (let i = 0; i < chart_arr.value.length; i++) {
                    chart_arr.value[i].resize();
                }
            });
        },
    });
};
//左侧环形图
const initPieChart = (obj) => {
    let chart = echarts.init(document.getElementById("chart1"));
    let data = [
        { name: "轻度", value: obj.green },
        { name: "中度", value: obj.blue },
        { name: "重度", value: obj.yellow },
        { name: "严重", value: obj.orange },
        { name: "报废", value: obj.grey },
    ];
    // sheng_cnt.value = obj.green + obj.blue + obj.yellow + obj.orange + obj.grey;
    let options = {
        color: ["#67c23a", "#409eff", "#f4ea2a", "#fea821", "#909399"],
        tooltip: {
            trigger: "item",
        },
        legend: {
            top: "1%",
            left: "center",
        },
        grid: {
            top: "5px",
            left: "5px",
            right: "5px",
            bottom: "5px",
        },
        series: [
            {
                name: "在用绳综合状态情况",
                type: "pie",
                radius: ["60%", "85%"],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                },
                label: {
                    show: false,
                    position: "center",
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: "bold",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: data,
            },
        ],
    };
    chart.setOption(options);
    chart.on("click", (param) => {
        let data: any = param.data;
        let router_params = {
            depart: filterModel.value._DepartmentID,
            zonghe: null,
        };
        if (data != undefined) {
            switch (data.name) {
                case "轻度":
                    router_params.zonghe = 1;
                    break;
                case "中度":
                    router_params.zonghe = 2;
                    break;
                case "重度":
                    router_params.zonghe = 3;
                    break;
                case "严重":
                    router_params.zonghe = 4;
                    break;
                case "报废":
                    router_params.zonghe = 5;
                    break;
            }

            Gx.SetSession("queryItem", router_params);
            router.push({ name: "StatusMonitor" });
        }
    });
    chart_arr.value.push(chart);
};
//右侧四个柱状图
const initChart = () => {
    let chart1 = echarts.init(document.getElementById("chart_la")),
        chart2 = echarts.init(document.getElementById("chart_dia")),
        chart3 = echarts.init(document.getElementById("chart_lma")),
        chart4 = echarts.init(document.getElementById("chart_nianju"));
    let options = {
        color: ["#67C23A", "#409EFF", "#F4EA2A", "#FEA821", "#909399"],
        xAxis: {
            type: "category",
            data: ["轻度", "中度", "重度", "严重", "报废"],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [0, 0, 0, 0, 0],
                type: "bar",
                label: {
                    show: true,
                    position: "top",
                    color: "#25B3F2",
                },
            },
        ],
    };

    let options1 = _.cloneDeep(options),
        options2 = _.cloneDeep(options),
        options3 = _.cloneDeep(options),
        options4 = _.cloneDeep(options);

    options1.series[0].data = getChartData(HomeData.value.la);
    options2.series[0].data = getChartData(HomeData.value.dia);
    options3.series[0].data = getChartData(HomeData.value.lma);
    options4.series[0].data = getChartData(HomeData.value.nianJu);

    chart1.setOption(options1);
    chart2.setOption(options2);
    chart3.setOption(options3);
    chart4.setOption(options4);

    chart_arr.value.push(chart1);
    chart_arr.value.push(chart2);
    chart_arr.value.push(chart3);
    chart_arr.value.push(chart4);
};
const clearCharts = () => {
    let chart1 = echarts.init(document.getElementById("chart_la")),
        chart2 = echarts.init(document.getElementById("chart_dia")),
        chart3 = echarts.init(document.getElementById("chart_lma")),
        chart4 = echarts.init(document.getElementById("chart_nianju")),
        chart5 = echarts.init(document.getElementById("chart1"));
    chart1.dispose();
    chart2.dispose();
    chart3.dispose();
    chart4.dispose();
    chart5.dispose();
    chart_arr.value = [];
};
const getChartData = (data: Object) => {
    let arr = [],
        colorObj = {
            green: "#67C23A",
            blue: "#409EFF",
            yellow: "#F4EA2A",
            orange: "#FEA821",
            grey: "#909399",
        };
    for (let i in data) {
        arr.push({ value: data[i], itemStyle: { color: colorObj[i] } });
    }
    return arr;
};
</script>

<style lang="scss" scoped>
.HomeBox {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.head-title {
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: #065cc3;
    margin-right: 100px;

    .head-count {
        font-weight: 700;
        font-style: normal;
        font-size: 36px;
        color: #fea821;
        margin-right: 12px;
    }
}
.chart-content {
    width: 100%;
    height: calc(100vh - 50px);

    .chart-left {
        width: 40%;
        height: 100%;

        .chart-pie {
            height: 90%;
            .chart-pie-content {
                width: 100%;
                height: 100%;
            }
        }
        .chart-desc {
            height: 10%;
        }
    }
    .chart-right {
        width: 60%;
        height: 100%;
        display: flex;
        align-items: stretch;
        flex-flow: row wrap;

        .chart_line {
            width: 50%;
            height: 50%;

            .chartBox {
                width: 100%;
                height: 90%;
            }
        }
    }
}
</style>
